<template>
  <div>
    <el-switch
      v-model="isRandom"
      active-text="开启切换数据"
      inactive-text="关闭切换数据"
      :active-value="true"
      :inactive-value="false"
      active-color="#409eff"
      inactive-color="#d3d5df"
      @change="change"
    >
    </el-switch>
    <!-- 准备绘制radar图表的盒子: 注意要给宽高才行，最终会渲染成canvas标签，div里不要放其他内容 -->
    <div ref="radar" class="radarBox"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      // 控制是否开启随机数据
      isRandom: false,
      // 雷达图配置项数据
      opt: {
        // title: {
        //   text: '基础雷达图'
        // },
        tooltip: {}, // 鼠标悬停信息提示功能
        // legend: {
        //   data: ['张三', '李四']
        // },

        // 雷达图配置
        radar: {
          // shape: 'circle',
          axisName: {
            // textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
            // }
          },
          // 指定雷达图的维度、指标、属性(对应图中的几个角)
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [{
          type: 'radar', // 类型: 雷达图
          // areaStyle: {normal: {}},
          data: [{
            value: [10, 1, 100, 5, 100, 0],
            name: '张三'
          },
          {
            value: [50, 50, 50, 50, 50, 10],
            name: '李四'
          }]
        }]
      },
      // 定时器的id
      timer: ''
    }
  },
  // 在已挂载 钩子函数中 操作DOM
  mounted () {
    this.drawRadar()
  },
  beforeDestroy () {
    // 组件销毁前清除定时器
    clearInterval(this.timer)
  },
  methods: {
    // 绘制图表
    drawRadar () {
      // 基于准备好的dom，初始化echarts实例
      // 这里 eacharts 对象已经被全局挂载到Vue实例上了
      this.myChart = this.echarts.init(this.$refs.radar)
      // 绘制图表
      // Echarts的核心，绘制的配置文件！！
      this.myChart.setOption(this.opt)
    },
    /*
  // 乱排数组数据
  random () {
    const arr = []
    for (let i = 0; i < 3; i++) {
      const item = { value: [], name: `张${i}` }
      // 造六个指标项的数据
      for (let j = 0; j < 6; j++) {
        item.value.push(Math.floor(Math.random() * 100 + 1))
      }
      arr.push(item)
      this.radarData = arr
    }
    // ！！！注意: 重新绘制图表必须要重新调用setOption方法 ！！！
    // 既然要重新调用setOption方法，那么把整个 opt 抽离出来性能更好！！
    this.drawRadar()
  },
   */
    // 乱排制造三组假数据
    random () {
      const arr = []
      // 双重for循环
      for (let i = 0; i < 3; i++) {
        const item = { value: [], name: `张${i + 1}` }
        // 造六个指标项的数据
        for (let j = 0; j < 6; j++) {
          item.value.push(Math.floor(Math.random() * 100 + 1))
        }
        arr.push(item)
      }
      // 绘制图表=》1. 改数据
      this.opt.series[0].data = arr
      // 2. 重新绘制=》setOption
      this.myChart.setOption(this.opt)
    },
    // 切换数据状态
    change () {
      // 根据 switch 状态来设置是否开启乱排
      if (this.isRandom) {
        console.log('开启乱排')
        this.timer = setInterval(() => {
          this.random()
        }, 1000)
      } else {
        console.log('结束乱排')
        clearInterval(this.timer)
        this.timer = null // 置空定时器id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.radarBox {
  width: 100%;
  height: 400px;
}
</style>
